<template>
  <layout class="content">
    <Row>
      <Col span="18">
        <Row style="background: white">
          <Col span="24">
            <Carousel
              v-model="lunbo.value"
              :autoplay="lunbo.autoplay"
              :height="lunbo.height"
              :autoplay-speed="lunbo.autoplaySpeed"
              :loop="lunbo.loop"
              :dots="lunbo.dots"
              :trigger="lunbo.trigger"
              :arrow="lunbo.arrow"
            >
              <CarouselItem>
                <div class="demo-carousel">
                  <img src="../../static/images/blog-1.jpg" alt="" />
                </div>
              </CarouselItem>
              <CarouselItem>
                <div class="demo-carousel">
                  <img src="../../static/images/blog-3.jpg" alt="" />
                </div>
              </CarouselItem>
              <CarouselItem>
                <div class="demo-carousel">
                  <img src="../../static/images/blog-4.jpg" alt="" />
                </div>
              </CarouselItem>
            </Carousel>
          </Col>
        </Row>
        <Col span="24">
          <Tabs value="name1" class="tab_box whitebg">
            <TabPane label="SEO优化" name="name1">
              <div class="newsitem">
                <div class="newspic">
                  <ul>
                    <li>
                      <a
                        ><img src="../../static/images/seo.jpg" />
                        <span>SEO基础知识--新手必备。</span>
                      </a>
                    </li>
                    <li>
                      <a
                        ><img src="../../static/images/xt1.jpg" />
                        <span>文章如何被百度收取。</span>
                      </a>
                    </li>
                  </ul>
                </div>
                <ul class="newslist">
                  <li>
                    <i></i>
                    <router-link
                      to="/detail"
                      title="如何选择域名更加利于网站优化？"
                    >
                      如何选择域名更加利于网站优化？
                    </router-link>
                    <p>
                      很多新手站长朋友，包括一些刚从事SEO这个行业的朋友，他们都还没意识到域名的重要性。其实选择域名非常重要，因为他是网站优化第一步。
                      注册域名的时候我们首先找与主题相关域名，首选中文全拼音，其次选择英文，如果没有，请选择域名长度较短的。
                    </p>
                  </li>
                  <li>
                    <i></i>
                    <router-link to="/detail1" title="排名和收录之间有何关系">
                      排名和收录之间有何关系。
                    </router-link>
                    <p>
                      排名和收录之间的联系，我相信这是大多站长们都关心的问题。有人会说：我网站收录有几百个页面，但是排名却不怎么好。
                      有些网站只收录十多个页面，但排名却很好呢？因此说明了一个问题：排名和收录没有直接的关系，但是收录能间接促进关键词排名。。
                    </p>
                  </li>
                  <li>
                    <i></i>
                    <router-link
                      to="/detail1"
                      title="写网页内容需要注意些什么？（转）"
                    >
                      写网页内容需要注意些什么？（转）
                    </router-link>
                    <p>
                      网页内容是写给谁看的？在你编辑网页内容之前一定要明白这个问题，网页内容是给搜索引擎看的，但同时更重要的是给用户看的，所以必须满足以下几个条件：
                    </p>
                  </li>
                  <li>
                    <i></i>
                    <router-link to="/detail1" title="">
                      怎么样才能添加高质量的锚文本链接（转）
                    </router-link>
                    <p>
                      又到跟大家一起分享干货的时候了！今天分享主题“添加高质量的锚文本链接”。
                      什么是锚文本链接我想大家都知道的，笔者在这里就不多说了，这个做网站优化的都知道的。
                      怎么添加锚文本链接也不用多说，也是人尽皆知的。
                    </p>
                  </li>
                  <li>
                    <i></i>
                    <router-link to="/detail1" title="">
                      7天上网站首页的三大因素
                    </router-link>
                    <p>
                      不知道怎么了，突然感觉到这几天好累！感觉人都快没动力了！个人博客虽然做出来了，发现的问题也多了。（想做排名，做到首页，做到个人博客的NO.1)
                      俗话说的好“不想当将军的士兵，
                      不是好士兵”，对自己的个人博客也是如此。要想做好！做到NO.1，必须得下工夫，可是觉得自己现在的知识面真的窄。
                    </p>
                  </li>
                </ul>
              </div>
            </TabPane>
            <TabPane label="技术分享" name="name2">
              <div class="newsitem">
                <div class="newspic">
                  <ul>
                    <li>
                      <a
                        ><img src="../../static/images/seo.jpg" />
                        <span>HTML+CSS+JS。</span>
                      </a>
                    </li>
                    <li>
                      <a
                        ><img src="../../static/images/xt1.jpg" />
                        <span>Vue</span>
                      </a>
                    </li>
                  </ul>
                </div>
                <ul class="newslist">
                  <li>
                    <i></i>
                    <router-link to="/detail" title="Vue3 插件开发详解尝鲜版">
                      Vue3 插件开发详解尝鲜版
                    </router-link>
                    <p>
                      vue3.0-beta
                      版本已经发布了一段时间了，正式版本据说在年中发布（直播的时候说的是年中还是年终，网上传闻说是
                      6 月份）。 嘴上说着学不动，身体却很诚实地创建一个 vue3
                      的项目，兴致勃勃地引入 vue2
                      插件的时候，眉头一皱，发现事情并没有那么简单。
                    </p>
                  </li>
                  <li>
                    <i></i>
                    <router-link to="/detail1" title="前端常见的加密算法介绍">
                      前端常见的加密算法介绍
                    </router-link>
                    <p>
                      在信息安全越来越受重视的今天，前端的各种加密也变得更加重要。通常跟服务器的交互中，
                      为保障数据传输的安全性，避免被人抓包篡改数据，除了 https
                      的应用，还需要对传输数据进行加解密。
                    </p>
                  </li>
                  <li>
                    <i></i>
                    <router-link
                      to="/detail1"
                      title="Rollup.js：开源JS库的打包利器"
                    >
                      Rollup.js：开源JS库的打包利器
                    </router-link>
                    <p>
                      Rollup 是一个 JavaScript
                      模块打包器，说到模块打包器，自然就会想到 webpack。webpack
                      是一个现代 JavaScript 应用程序的静态模块打包器， 那么在
                      webpack 已经成为前端构建主流的今天，为什么还要用 Rollup
                      呢？
                    </p>
                  </li>
                </ul>
              </div>
            </TabPane>
            <TabPane label="音乐+游戏" name="name3">
              <div class="newsitem">
                <div class="newspic">
                  <ul>
                    <li>
                      <a
                        ><img src="../../static/images/seo.jpg" />
                        <span>HTML+CSS+JS。</span>
                      </a>
                    </li>
                    <li>
                      <a
                        ><img src="../../static/images/xt1.jpg" />
                        <span>Vue</span>
                      </a>
                    </li>
                  </ul>
                </div>
                <ul class="newslist">
                  <li>
                    <i></i>
                    <router-link to="/detail" title="Vue3 插件开发详解尝鲜版">
                      Vue3 插件开发详解尝鲜版
                    </router-link>
                    <p>
                      vue3.0-beta
                      版本已经发布了一段时间了，正式版本据说在年中发布（直播的时候说的是年中还是年终，网上传闻说是
                      6 月份）。 嘴上说着学不动，身体却很诚实地创建一个 vue3
                      的项目，兴致勃勃地引入 vue2
                      插件的时候，眉头一皱，发现事情并没有那么简单。
                    </p>
                  </li>
                  <li>
                    <i></i>
                    <router-link to="/detail1" title="前端常见的加密算法介绍">
                      前端常见的加密算法介绍
                    </router-link>
                    <p>
                      在信息安全越来越受重视的今天，前端的各种加密也变得更加重要。通常跟服务器的交互中，
                      为保障数据传输的安全性，避免被人抓包篡改数据，除了 https
                      的应用，还需要对传输数据进行加解密。
                    </p>
                  </li>
                  <li>
                    <i></i>
                    <router-link
                      to="/detail1"
                      title="Rollup.js：开源JS库的打包利器"
                    >
                      Rollup.js：开源JS库的打包利器
                    </router-link>
                    <p>
                      Rollup 是一个 JavaScript
                      模块打包器，说到模块打包器，自然就会想到 webpack。webpack
                      是一个现代 JavaScript 应用程序的静态模块打包器， 那么在
                      webpack 已经成为前端构建主流的今天，为什么还要用 Rollup
                      呢？
                    </p>
                  </li>
                </ul>
              </div>
            </TabPane>
            <TabPane label="程序员的自我修养" name="name4">
              <div class="newsitem">
                <div class="newspic">
                  <ul>
                    <li>
                      <a
                        ><img src="../../static/images/seo.jpg" />
                        <span>青春</span>
                      </a>
                    </li>
                    <li>
                      <a
                        ><img src="../../static/images/xt1.jpg" />
                        <span>旅行</span>
                      </a>
                    </li>
                  </ul>
                </div>
                <ul class="newslist">
                  <li>
                    <i></i>
                    <router-link to="/detail" title="为爱，守望一生的时光">
                      为爱，守望一生的时光
                    </router-link>
                    <p>
                      拾起一段葱茏的过往， 一笺心语便轻轻的流淌过岁月，
                      你文字的馨香， 轻易便触模到我烟火的模样。 ／ 有一种爱，
                      是流水花香的曼妙 让掌心的记忆，写满了诗和远方
                      那些身手相牵的过往，珍藏着你的笑
                      待经年的风吹过处，是为爱低眉的时光。
                    </p>
                  </li>
                  <li>
                    <i></i>
                    <router-link to="/detail1" title="往昔终不在，岁月愿重来">
                      往昔终不在，岁月愿重来
                    </router-link>
                    <p>
                      沉相遇__秋思落
                      寒风凛冽的清晨，我从朦胧的梦中醒来，我是很不愿意早早起床的，那是因为我的心都是冷的。
                      但寒冷依然在四季中轮回，年年岁岁，从不停歇，从不偷懒，
                      而我，依然宿命孑然一身的守候着，亦如迁徙的候鸟，孤独的翱翔于天际，只为等待下一个季节的更替。
                    </p>
                  </li>
                  <li>
                    <i></i>
                    <router-link
                      to="/detail1"
                      title="看淡了是生活，看透了是幸福"
                    >
                      看淡了是生活，看透了是幸福
                    </router-link>
                    <p>
                      淡看人生，笑看风云。很多事情，不是我们想要遇见，而是被遇见，甚至是强加于人；有些事情，不是看不懂，而是放不下。想通了，气就顺了，看淡了，心就轻盈了。
                      生活中没有什么是一成不变的，
                      我们就是站着不动，也会被生活的残酷粘上来，往往前面没有了路，还必须选择带伤前进。
                    </p>
                  </li>
                </ul>
              </div>
            </TabPane>
          </Tabs>
        </Col>
        <Col span="24">
          <div class="zhuanti whitebg">
            <h2 class="htitle">
              特别推荐
              <span class="hnav">
                <Breadcrumb>
                  <BreadcrumbItem to="/">博客</BreadcrumbItem>
                </Breadcrumb>
              </span>
            </h2>
            <ul>
              <li>
                <i class="ztpic">
                  <a href="" target="_blank"
                    ><img src="../../static/images/jishu-1.png"
                  /></a>
                </i>
                <h2>css-实现蜂窝形状</h2>
                <span>
                  css基础，动画及border的真实面目。方法一：将六边形看成三个矩形的旋转拼接，六边形每一个角为60°，根据计算可以得出高宽之间的关系为根号3
                  ： 1。
                </span>
                <router-link to="" title="阅读更多" class="readmore">
                  文章阅读</router-link
                >
              </li>
              <li>
                <i class="ztpic">
                  <a href="" target="_blank"
                    ><img src="../../static/images/jishu-2.png"
                  /></a>
                </i>
                <h2>es6-Promise解决回调地狱</h2>
                <span>
                  假如我们有很多异步事件，而这些异步事件又有很紧密的联系，比如一个异步事件要依赖另一个异步事件的返回值，看下面的：
                </span>
                <router-link to="" title="阅读更多" class="readmore">
                  文章阅读</router-link
                >
              </li>
              <li>
                <i class="ztpic">
                  <a href="" target="_blank"
                    ><img src="../../static/images/vue-1.png"
                  /></a>
                </i>
                <h2>vue之路由钩子函数</h2>
                <span>
                  vue路由钩子函数可以大致分为三类，他们的作用都是主要对路由的跳转进行控制，例如权限管理、登录判断、浏览器判断。
                </span>
                <router-link to="" title="阅读更多" class="readmore">
                  文章阅读</router-link
                >
              </li>
              <li>
                <i class="ztpic">
                  <a href="" target="_blank"
                    ><img src="../../static/images/react-1.png"
                  /></a>
                </i>
                <h2 title="react withRouter">react withRouter</h2>
                <span>
                  高阶组件中的withRouter, 作用是将一个组件包裹进Route里面,
                  然后react-router的三个对象history, location,
                  match就会被放进这个组件的props属性中。
                </span>
                <router-link to="" title="阅读更多" class="readmore">
                  文章阅读</router-link
                >
              </li>
              <li>
                <i class="ztpic">
                  <a href="" target="_blank"
                    ><img src="../../static/images/nodejs-1.png"
                  /></a>
                </i>
                <h2>Node.js 应用：Koa2 使用 JWT 进行鉴权</h2>
                <span>
                  在前后端分离的开发中，通过 Restful API
                  进行数据交互时，如果没有对 API
                  进行保护，那么别人就可以很容易地获取并调用这些 API
                  进行操作。那么服务器端要如何进行鉴权呢？
                </span>
                <router-link to="" title="阅读更多" class="readmore">
                  文章阅读</router-link
                >
              </li>
              <li>
                <i class="ztpic">
                  <a href="" target="_blank"
                    ><img src="../../static/images/nodejs-1.png"
                  /></a>
                </i>
                <h2>使用 Node.js 开发简单的脚手架工具</h2>
                <span>
                  像我们熟悉的 vue-cli，react-native-cli
                  等脚手架，只需要输入简单的命令 vue init webpack
                  project，即可快速帮我们生成一个初始项目。在实际工作中，我们可以定制一个属于自己的脚手架，来提高自己的工作效率。
                </span>
                <router-link to="" title="阅读更多" class="readmore">
                  文章阅读</router-link
                >
              </li>
            </ul>
          </div>
        </Col>
        <Col span="24">
          <div class="layui-col-xs12 whitebg bloglist">
            <h2 class="htitle">最新博文</h2>
            <ul>
              <li>
                <div class="blogtitle">
                  <router-link to="" title="css+jquery实现美化的switch开关">
                    css+jquery实现美化的switch开关
                  </router-link>
                </div>
                <span class="blogpic imgscale">
                  <a href="" title="">
                    <img
                      src="https://blog.yzmcms.com/uploads/thumbnail/20160706200134550.jpg"
                      alt=""
                    />
                  </a>
                </span>
                <p class="blogtext">
                  没有用插件，利用label +
                  radio特性做了一个switch开关，代码简洁易懂，可以集成到项目里，美化radio，完整代码分享...
                </p>
                <p class="bloginfo">
                  <i class="avatar"
                    ><img
                      src="https://img2.baidu.com/it/u=2354730419,3955582300&fm=26&fmt=auto&gp=0.jpg" /></i
                  ><span>大坤</span>
                  <span>2020-5-10</span>
                </p>
                <router-link to="" title="阅读更多" class="viewmore">
                  阅读更多</router-link
                >
              </li>
              <li>
                <div class="blogtitle">
                  <router-link to="" title="Js实现粘贴上传图片">
                    Js实现粘贴上传图片
                  </router-link>
                </div>
                <span class="blogpic imgscale">
                  <a href="" title="">
                    <img
                      src="https://blog.yzmcms.com/uploads/thumbnail/20160706200134550.jpg"
                      alt=""
                    />
                  </a>
                </span>
                <p class="blogtext">
                  我们或多或少都使用过各式各样的富文本编辑器，其中有一个很方便功能，复制一张图片然后粘贴进文本框，这张图片就被上传了，那么这个方便的功能是如何实现的呢？复制=>粘贴=>上传...
                </p>
                <p class="bloginfo">
                  <i class="avatar"
                    ><img
                      src="https://img2.baidu.com/it/u=2354730419,3955582300&fm=26&fmt=auto&gp=0.jpg" /></i
                  ><span>大坤</span>
                  <span>2021-5-10</span>
                </p>
                <router-link to="" title="阅读更多" class="viewmore">
                  阅读更多</router-link
                >
              </li>
              <li>
                <div class="blogtitle">
                  <router-link to="" title="html中的map标签和area标签详解">
                    html中的map标签和area标签详解
                  </router-link>
                </div>
                <span class="blogpic imgscale">
                  <a href="" title="">
                    <img
                      src="https://blog.yzmcms.com/uploads/thumbnail/20170118094330506.jpg"
                      alt=""
                    />
                  </a>
                </span>
                <p class="blogtext">
                  我们或多或少都使用过各式各样的富文本编辑器，其中有一个很方便功能，复制一张图片然后粘贴进文本框，这张图片就被上传了，那么这个方便的功能是如何实现的呢？复制=>粘贴=>上传...
                </p>
                <p class="bloginfo">
                  <i class="avatar"
                    ><img
                      src="https://img2.baidu.com/it/u=2354730419,3955582300&fm=26&fmt=auto&gp=0.jpg" /></i
                  ><span>大坤</span>
                  <span>2021-5-11</span>
                </p>
                <router-link to="" title="阅读更多" class="viewmore">
                  阅读更多</router-link
                >
              </li>
            </ul>
          </div>
        </Col>
      </Col>
      <Col span="6" style="padding-left: 20px">
        <Sider></Sider>
      </Col>
    </Row>
  </layout>
</template>

<script>
import Sider from "@/components/Sider";
export default {
  name: "Content",
  data() {
    return {
      // 轮播参数配置
      lunbo: {
        value: 0,
        autoplay: true,
        height: "240px",
        loop: true,
        autoplayspeed: "5000",
        dots: "inside",
        trigger: "click",
        arrow: "hover",
      },
    };
  },
  components: {
    Sider,
  },
};
</script>

<style scoped>
/*轮播*/
.lunbo {
  min-height: 260px;
  overflow: hidden;
}
.lunbo img {
  width: 100%;
}
/* 轮播右*/
.lunbor li {
  /*width: 100%;*/
  background: #000;
  overflow: hidden;
  max-height: 154px;
  margin-bottom: 10px;
  border-radius: 3px;
  position: relative;
}

.lunbor li a {
  display: block;
  overflow: hidden;
  height: 100%;
}

.lunbor li img {
  width: 100%;
  height: 100%;
  -moz-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  transition: all 0.5s;
  opacity: 0.7;
}

.lunbor li:hover img {
  transform: scale(1.1);
  opacity: 1;
}

.lunbor li span {
  bottom: 0;
  position: absolute;
  top: 30%;
  left: 0;
  right: 0;
  color: #fff;
  text-align: center;
  font-size: 15px;
  margin-top: 5px;
  padding: 0 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-height: 24px;
  height: 48px;
}
/* 轮播右 end*/

.blogtitle {
  height: 40px;
}
.zhuanti span {
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 3;
}
</style>
